import React, { useState, useEffect } from 'react'
import cn from 'classnames'
import SubPub from 'pubsub-js'
import i from '@/index.module.css';
import { Input, Message, Button, Datetime, Checkbox, Loading } from '@knownsec/react-component';
import s from '../style.module.css';
import n from './style.module.css'
import moment from 'moment'
import { ntpConfig } from '~/API';
import { getErrorMessage, isIP } from '@/common/constant';
import BreadCrumb from '@/components/BreadCrumb';

export default function SystemTime () {
  const [val, setVal] = useState('')
  const [now, setNow] = useState(moment())
  const [check, setCheck] = useState(false)
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    getData()
  }, [])
  const getData = () => {
    ntpConfig('GET').then(res => {
      setCheck(res?.data?.service_status ? true : false)
      setNow(moment(res?.data?.server_times))
      setVal(res?.data?.server_ip || '')
      SubPub.publish('times', res?.data?.server_times)
    }).catch(err => Message.show({ type: 'error', message: getErrorMessage(err) }))
  }
  const btnSubmit = type => {
    const data = {
      action: type,
      server_ip: val,
      server_times: now.format('YYYY-MM-DD HH:mm:ss'),
      service_status: check ? 1 : 0
    }
    if (check && isIP(val) <= 0) {
      Message.show({
        type: 'error',
        message: 'IP地址格式错误'
      })
      return
    }
    setLoading(true)
    ntpConfig('POST', data).then(res => {
      setLoading(false)
      Message.show({
        type: res.status,
        message: res.data.detail,
        onclose () {
          getData()
        }
      })
    }).catch(err => {
      setLoading(false)
      Message.show({ type: 'error', message: getErrorMessage(err) })
    })
  }
  return (
    <div className={i.mainContent}>
      <BreadCrumb
        arr={[
          { link: '', name: '系统状态' },
          { link: '', name: '系统时间', active: true },
        ]}
      />
      <div className={cn(s.content, i.p24, i.oa, i.h100p, i.mins)}>
        <div className={s.bgc}>
          <div className={cn(i.p24, i.pr)}>
            <p>系统时间</p>
            <Loading show={loading} />
            <div className={cn(i.df, i.aic, i.mt20, i.mb10)}>
              <p>设置系统时间：</p>
              <Datetime className={cn(i.ml20, n.radiu)} value={now} onChange={(val) => setNow(val)} />
            </div>
            <div className={cn(n.bors)}>
              <div className={cn(i.df, i.aic)}>
                <p>NTP时间同步：</p>
                <Checkbox
                  children={'启用'}
                  className={i.ml20}
                  checked={check}
                  onChange={({ value }) => setCheck(value)}
                />
                {check && (
                  <div className={cn(i.df, i.aic, i.ml20)}>
                    <span className={cn(i.dib, i.w60)}>服务器</span>
                    <Input
                      pro
                      className={i.dib}
                      placeholder="请填写服务器IP"
                      value={val}
                      onChange={({ value }) => setVal(value)}
                    />
                  </div>
                )}
              </div>
            </div>
            <div className={cn(n.ml55,i.mt20)}>
              <span>操作：</span>
              <Button type="primary" className={i.ml20} onClick={() => btnSubmit('wass')}>
                保存
              </Button>
              <Button type="primary" className={cn(i.ml5, n.black)} onClick={() => btnSubmit('lo')}>
                与本地同步
              </Button>
              {check && (
                <Button
                  type="primary"
                  className={cn(i.ml5, n.black)}
                  onClick={() => btnSubmit('ntp')}
                >
                  立即与NTP同步
                </Button>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
